<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>设备管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/record' }">补货记录</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="record-content">
			<div class="top-tabs">
				<div v-for="item in tabsList" :key="item.index"
					:class="activeIndex === item.index ? 'activity-item' : ''" class="tabs-item" @click="cutTabs(item)">
					{{item.name}}
				</div>
			</div>
			<div class="choice-list">
				<div class="choice-item" v-for="item in searchList" :key="item.index">
					<div class="choice-title">{{item.name}}</div>
					<el-select v-if="item.index!='1' && item.type == '1'" v-model="item.ivalue"
						:placeholder="item.placeholder">
						<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
					</el-select>
					<el-input v-model="item.ivalue" v-if="item.type=='1'&& item.name == '设备名称'" class="rounded-input"
						@blur="blurClick()" @focus="focusClick(item)" :placeholder="item.placeholder" />
					<el-date-picker v-if="item.index=='10'" v-model="item.ivalue" type="date"
						:placeholder="item.placeholder" style="width: 160px;" :suffix-icon="CaretBottom" />
				</div>
				<view class="choice-box">
					<div class="choice-btn">
						<el-button round :icon="Search" color="#0071bb">查询</el-button>
						<el-button round :icon="RefreshLeft">重置</el-button>
					</div>
				</view>
			</div>
			<div class="use">
				<el-button round>导出补货清单</el-button>
				<el-button round :icon="Refresh">刷新</el-button>
				<el-button round color="#0071bb" :icon="HelpFilled">筛选</el-button>
			</div>
			<div class="tables">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="selection" v-model="whole" />
					<el-table-column prop="id" label="序号" />
					<el-table-column prop="date" label="补货日期" />
					<el-table-column prop="name" label="设备名称" />
					<el-table-column prop="imei" label="设备IMEI号" />
					<el-table-column prop="identifier" label="生产编号" />
					<el-table-column prop="field" label="场地" />
					<el-table-column prop="region" label="区域" />
					<el-table-column prop="address" label="商圈" />
					<el-table-column prop="scene" label="场景策略" />
					<el-table-column prop="personnel" label="补货员" />
					<el-table-column prop="goods" label="商品">
						<template #default="scope">
							<div class="special" @click="goInfo">
								{{ scope.row.goods}}
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="page_number">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
					:disabled="disabled"  layout="prev, pager, next, jumper,total" :total="10"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useRouter } from 'vue-router';
	import { CaretBottom, Search, RefreshLeft, Refresh, HelpFilled } from '@element-plus/icons-vue'
	import type { ComponentSize } from 'element-plus'
	interface tabsList {
		name : string;
		index : string;
	}
	interface searchList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	const router = useRouter();
	const activeIndex = ref("1");
	const whole = ref(false)
	const currentPage = ref(1);
	const pageSize = ref(1);
	const size = ref<ComponentSize>('small')
	const disabled = ref(false)
	const tableData = [
		{
			id: '1',
			date: '2024-05-20',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			identifier: 'LHY2542541',
			field: '场地1',
			region: '常熟市',
			address: '常熟市琴川街道琴湖广场',
			scene: '购物中心',
			personnel: '小郑',
			goods: '详情',
		},
		{
			id: '1',
			date: '2024-05-20',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			identifier: 'LHY2542541',
			field: '场地1',
			region: '常熟市',
			address: '常熟市琴川街道琴湖广场',
			scene: '购物中心',
			personnel: '小郑',
			goods: '详情',
		},
		{
			id: '1',
			date: '2024-05-20',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			identifier: 'LHY2542541',
			field: '场地1',
			region: '常熟市',
			address: '常熟市琴川街道琴湖广场',
			scene: '购物中心',
			personnel: '小郑',
			goods: '详情',
		}
	]
	const tabsList = ref<tabsList[]>([
		{
			name: '全部',
			index: '1'
		},
		{
			name: '零柜售',
			index: '2'
		},
		{
			name: '提货柜',
			index: '3'
		}
	])
	const searchList = ref<searchList[]>([
		{
			name: '设备名称',
			index: '1',
			placeholder: '请输入',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备IMEI',
			index: '2',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '生产编号',
			index: '3',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备类型',
			index: '4',
			placeholder: '请选择类型',
			type: '1',
			ivalue: ''
		},
		{
			name: '场地',
			index: '5',
			placeholder: '请选择场地',
			type: '1',
			ivalue: ''
		},
		{
			name: '区域',
			index: '6',
			placeholder: '请选择区域',
			type: '1',
			ivalue: ''
		},
		{
			name: '商圈',
			index: '7',
			placeholder: '先选区域,再选商圈',
			type: '1',
			ivalue: ''
		},
		{
			name: '场地策略',
			index: '8',
			placeholder: '请选择场地策略',
			type: '1',
			ivalue: ''
		},
		{
			name: '补货员',
			index: '9',
			placeholder: '请选择补货员',
			type: '1',
			ivalue: ''
		},
		{
			name: '补货日期',
			index: '10',
			placeholder: '请选择补货日期',
			type: '2',
			ivalue: ''
		}
	])
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},
		{
			value: 'Option2',
			label: 'Option2',
		},
		{
			value: 'Option3',
			label: 'Option3',
		},
		{
			value: 'Option4',
			label: 'Option4',
		},
		{
			value: 'Option5',
			label: 'Option5',
		},
	]
	const cutTabs = (tabItem : tabsList) => {
		activeIndex.value = tabItem.index; // 更新左侧菜单激活的一级菜单项
	};
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
	const goInfo = () => {
		router.push('/record_info');
	}
</script>

<style lang="scss" scoped>
	.record-content {
		background-color: #fff;
		margin-top: 20px;
		padding: 10px 10px 0px 10px;

		.top-tabs {
			text-align: center;
			display: flex;
			font-weight: bold;
			font-size: 14px;

			.tabs-item {
				width: 150px;
				padding: 5px;
				background-color: #fff;
				border: 1px solid #d2d2d2;
				border-radius: 20px;
				margin-right: 15px;
			}

			.activity-item {
				background-color: #f0a93e;
				border: 1px solid #f0a93e;
				color: #fff;
			}

			.tabs-item:hover {
				cursor: pointer;
			}
		}

		.choice-list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20px;

			.choice-item {
				width: 14.2%;
				display: flex;
				align-items: center;
				margin-bottom: 15px;

				.el-select {
					width: 160px;
				}

				.choice-title {
					font-size: 12px;
					width: 80px;
					text-align: center;
				}

				.rounded-input {
					width: 160px;
				}
			}

			.choice-box {
				width: 57%;
				display: flex;
				justify-content: right;

				.choice-btn {
					display: flex;
					justify-content: left;
				}
			}
		}

		.use {
			padding-left: 10px;
			margin-top: 20px;
		}

		.tables {
			margin-top: 10px;

			.special {
				color: #519ed0;
				cursor: pointer;
			}
		}

		.page_number {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px 0;
		}
	}
</style>